<template>
	<div class="NotLogged">
		<h1>用户登录</h1>
		<div class="phone-wrapper">
			<span>+86</span>
			<van-image :src="img.register.down" width="14" height="6" class="icon1"></van-image>
			<input placeholder="请输入手机号" type="number" class="input1" @focus="isClose1=true" @blur="isClose1=false"
				v-model="phone" />
			<van-image :src="img.register.close" width="24" height="22" v-show="isClose1" class="icon2"></van-image>
		</div>
		<div class="verification-wrapper">
			<input placeholder="请输入收到的验证码" maxlength="8" class="input2" @focus="isClose2=true" @blur="isClose2=false"
				v-model="code" />
			<van-image :src="img.register.close" width="24" height="22" v-show="isClose2" class="icon3">
			</van-image>
			<div class="btn-gain-d" :class="{'btn-gain-a':(phone.length>0&&code.length>0&&!startCode)}"
				@click="gainCode(60)">{{startCode? '重新获取(' + time + 's)':'获取验证码'}}</div>
		</div>
		<div class="btn-signin" :class="{'btn-signin-d':!(phone.length>0&&code.length>0&&isChecked)}" @click="signIn()">
			登录</div>
		<div class="two-btn">
			<span>账号密码登录</span>
			<span>手机快速注册</span>
		</div>
		<div>
			<div class="other-top">
				<span class="title">其他登录方式</span>
			</div>
			<div class="other-content-wrapper">
				<div class="item-wrapper">
					<van-image :src="img.register.qq" width="50" height="50"></van-image>
					<span class="text">QQ</span>
				</div>
				<div class="item-wrapper">
					<van-image :src="img.register.wx" width="50" height="50"></van-image>
					<span class="text">微信</span>
				</div>
				<div class="item-wrapper">
					<van-image :src="img.register.apple" width="50" height="50"></van-image>
					<span class="text">苹果</span>
				</div>
			</div>
			<div class="agreement">
				<input type="checkbox" v-model="isChecked" />
				<span class="text1">若您输入的手机号未注册，将为您直接注册，注册即视为同意<span class="text2"> 用户协议</span>、<span
						class="text2">用户隐私政策</span></span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				time: null,
				startCode: false,
				interval: null,
				isChecked: false,
				isClose1: false,
				isClose2: false,
				img: {
					register: {
						down: require('@/assets/user/register/down.png'),
						close: require('@/assets/user/register/close.png'),
						qq: require('@/assets/user/register/qq.png'),
						wx: require('@/assets/user/register/wx.png'),
						apple: require('@/assets/user/register/apple.png'),
					}
				},
				phone: '',
				code: '',
			}
		},
		methods: {
			//获取验证码
			gainCode(time) {
				if (this.startCode == false && this.phone.length > 0 && this.code.length > 0) {
					this.time = time
					this.startCode = true
					this.interval = setInterval(() => {
						if (this.time == 0) {
							clearInterval(this.interval)
							this.startCode = false
						} else {
							this.time--
						}
					}, 1000)
				} else {

				}
			},
			//登录验证
			signIn() {
				if (this.phone.length > 0 && this.code.length > 0 && this.isChecked) {
					let obj = {
						phone: this.phone,
						code: this.code
					}
					this.$toast('登录成功');
					setTimeout(() => {
						let obj = {
							user: this.phone
						}
						this.$store.commit('updateUserinfo', obj)
						localStorage.setItem('user', this.phone)
						this.$parent.isSgin = true
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.NotLogged {
		padding: 10px 24px;

		.phone-wrapper {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #E8E8E8;
			padding: 30px 0 10px 0;
			position: relative;

			.icon1 {
				padding: 0 10px;
			}

			.input1 {
				width: 100%;
				border: none;
				outline: medium;
			}

			.icon2 {
				position: absolute;
				top: 28rpx;
				right: 0;
			}
		}

		.verification-wrapper {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #E8E8E8;
			padding: 30px 0 10px 0;
			position: relative;

			.input2 {
				width: 100%;
				border: none;
				outline: medium;
			}

			.icon3 {
				position: absolute;
				top: 28px;
				right: 110px;
			}

			.btn-gain-a {
				color: #e2231a !important;
			}

			.btn-gain-d {
				width: 140px;
				font-size: 14px;
				border-left: 1px solid #DCDEE0;
				text-align: center;
				margin-left: 10px;
				color: #848689;
			}
		}

		.btn-signin {
			background-color: #ff2000;
			padding: 16px 20px;
			width: 80%;
			color: #FFFFFF;
			text-align: center;
			margin: 0 auto;
			border-radius: 50px;
			margin-top: 30px;
		}

		.btn-signin-d {
			cursor: default;
			opacity: 0.4;
		}

		.two-btn {
			display: flex;
			justify-content: space-between;
			color: rgba(0, 0, 0, .4);
			font-size: 14px;
			margin-top: 20px;
		}

		.other-top {
			border-top: 1px solid #cfcfcf;
			margin-top: 30px;

			.title {
				margin: -11px auto 0;
				display: block;
				background-color: #FFFFFF;
				width: 150px;
				text-align: center;
				font-size: 14px;
				color: #b9b9b9;
			}
		}

		.other-content-wrapper {
			display: flex;
			justify-content: center;
			margin-top: 20px;

			.item-wrapper {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 15px;

				.text {
					line-height: 20px;
					font-size: 14px;
					color: #8b8b8b;
				}
			}
		}

		.agreement {
			text-align: center;
			margin-top: 20px;

			.text1 {
				color: rgba(0, 0, 0, .3);
				font-size: 14px;
			}

			.text2 {
				color: #1989FA;
			}
		}
	}
</style>
